<template>
  <el-dialog
    title="题目预览"
    @close="$emit('update:isShowPuop', false)"
    :visible="isShowPuop"
    width="50%"
  >
    <template>
      <ul class="ul-style">
        <li class="items">
          【题型】：{{ dataList.questionType == 1 ? '单选题' : '多选题' }}
        </li>
        <li class="items">【编号】：{{ dataList.catalogID }}</li>

        <li class="items" v-if="dataList.difficulty == 1">【难度】：简单</li>
        <li class="items" v-else-if="dataList.difficulty == 2">
          【难度】：一般
        </li>
        <li class="items" v-else>【难度】：困难</li>

        <li class="items">【标签】：{{ dataList.tags }}</li>
        <li class="items">【学科】：{{ dataList.subjectName }}</li>
        <li class="items">【目录】：{{ dataList.catalogID }}</li>
        <li class="items">【方向】：{{ dataList.direction }}</li>
      </ul>
      <hr />
      <ul>
        <li>
          【题型】：{{ dataList.questionType == 1 ? '单选题' : '多选题' }}
        </li>
        <li v-html="dataList.question"></li>
        <li>
          {{ dataList.questionType == 1 ? '单选题' : '多选题' }}
          选项:(一下选中的选项为正确答案)
        </li>

        <el-radio-group v-model="radio" v-if="dataList.questionType == 1">
          <div v-for="(item, index) in dataList.options" :key="index">
            <el-radio :label="item.isRight">{{ item.code }}</el-radio>
          </div>
        </el-radio-group>

        <el-checkbox-group v-model="checkList" v-else>
          <div v-for="(item, index) in dataList.options" :key="index">
            <el-checkbox :label="item.isRight">{{ item.code }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </ul>
      <hr />
      <ul class="paents">
        <li>【参考答案】：</li>
        <span class="text-btn son" @click="isVideo = true">视频答案预览</span>
        <li>
          <video
            class="video video-warp"
            :src="dataList.videoURL"
            controls="controls"
            width="400"
            height="300"
            v-show="isVideo"
          ></video>
        </li>
      </ul>
      <hr />
      <ul class="flex-style">
        <li>【答案解析】：</li>
        <span>无</span>
      </ul>
      <hr />
      <ul class="flex-style">
        <li>【题目备注】：</li>
        <span>无</span>
      </ul>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('update:isShowPuop', false)"
        >关 闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getquestions } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsIndex',
  props: {
    isShowPuop: {
      type: Boolean,
      default: false
    },
    cartId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      isVideo: false,
      dataList: [],
      radio: 1,
      checkList: [1]
    }
  },
  methods: {
    async isgetquestions() {
      try {
        const res = await getquestions({ id: this.cartId })
        this.dataList = res.data
        // console.log(this.dataList)
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    }
  },
  mounted() {
    this.isgetquestions()
  }
}
</script>

<style scoped lang="scss">
ul {
  list-style: none;
}
li {
  margin-bottom: 10px;
}
.text {
  margin-right: 5px;
}
.flex-style {
  display: flex;
}
.paents {
  position: relative;
  .son {
    position: absolute;
    top: -11px;
    left: 137px;
  }
  .video {
    margin-top: 5px;
  }
}
.text-btn {
  cursor: pointer;
  border: 1px solid #dcdfe6;
  text-align: center;
  padding: 10px 10px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.ul-style {
  display: flex;
  flex-flow: wrap;
  .items {
    width: 25%;
  }
  .video-warp {
    width: 800px;
    margin: auto;
    text-align: center;
  }
}
</style>
